<template>
    <h3>事件修饰符</h3>
    <a @click.prevent="clickHandler" href="https://itbaizhan.com">百战程序员</a>
    <div @click="clickDIV">
        <p @click.stop="clickP">阻止冒泡</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            names: ['John', 'Mike', 'yex']
        }
    },
    methods: {
        clickHandler(e){
            //e.preventDefault(); // 阻止默认行为：阻止跳转
            console.log('点击了链接');
        },
        clickDIV(e){
            
            console.log('点击了div');
        },
        clickP(e){
            //e.stopPropagation(); // 阻止冒泡：阻止DIV的事件
            console.log('点击了p');
        }
    }
}

</script>